<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
	<title>Document</title>
	<script type="text/javascript">
		function changeSize(){
			$(this).animate({fontSize:"+=3px"});
		}
		
		function changeColor(){
			$(this).animate({letterSpacing:"+=2px"});
		}


		$(document).ready(function(){
			$("#btn1").bind({
				click:function(){$("#p1").slideToggle();},
				mouseover:function(){$("#div1").css("background-color","red");},
				mouseout:function(){$("#div1").css("background-color","#FFFFFF");}
			});
            
            $("#blur").focus(function(){
            	$("#blur").css("background-color","#ffffcc");
            });
            $("#blur").blur(function(){
            	$("#blur").css("background-color","#d6d6ff");
            });

            $(".field").change(function(){
            	$(this).css("background-color","#ffffcc");
            });
            $("#btn2").click(function(){
            	$(".field").change();
            });

            $("#div2").delegate("p","click",function(){
            	$(this).slideToggle();
            });
            $("#btn3").click(function(){
            	$("<p>这是一个新段落。</p>").insertAfter("#btn3");
            });
            $("#btn7").click(function(){
            	$("#div2").undelegate();
            });

        
            $(".live").on("click",changeSize);
            $(".live").on("click",changeColor);
            $("#btn4").click(function(){
                $(".live").die("click",changeSize);
            });

            $("img").error(function(){
            	$("img").replaceWith("<p><b>图片未加载！</b></p>");
            });

            $("a").click(function(event){
            	event.preventDefault();
            	alert("Default prevented: " + event.isDefaultPrevented());
            });

            $(document).mousemove(function(e){
            	$("#page").text("X: " + e.pageX + ",Y: " + e.pageY);
            });

            $("#btn5").click(function(e){
            	return("最后一次点击的鼠标位置是： X" +e.pageX + ", Y" + e.pageY);
            });
            $("#btn5").click(function(f){
            	$("#result").html(f.result);
            });

            $(".target").click(function(event){
            	$("#div3").html("点击事件由一个 " + event.target.nodeName + " 元素触发" );
            });

            $("#btn6").click(function(e){
            	$("#stamp").text(e.timeStamp);
            });

            $("#type").bind("click dblclick mouseover mouseout",function(event){
            	$("#div4").html("事件：" + event.type);
            });

            $("#which").keydown(function(event){
            	$("#div5").html("Key: " + event.which);
            });

            $(window).resize(function(){
            	$("#resize").text(x+=1);
            });

		});
	</script>
</head>
<body>
	<div id="div1">
		<p id="p1">This is a paragraph.</p>
		<button id="btn1">请点击这里</button>
	</div>
	<br>

	<div>Enter your name:
		<input id="blur" type="text" name="">
	</div>
	<p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p>
    <br>

    <button id="btn2">激活文本域的 change 事件</button>
    <p>Enter your name: 
    	<input class="field" type="text" />
    </p>
    <br>

    <div id="div2" style="background-color:yellow">
    	<p>这是一个段落</p>
    	<p>请点击任意一个 p 元素，它会消失。包括本段落。</p>
    	<button id="btn3">在本按钮后面插入一个新的 p 元素</button>
    	<button id="btn7">从所有元素删除由 delegate() 方法添加的事件处理器</button>
    </div>
    <p><b>注释：</b>通过使用 delegate() 方法，而不是 live()，只有 div 元素中的 p 元素会受到影响。</p>

    <div>
    	<p class="live">这是一个段落。</p>
    	<p class="live">这是另一个段落。</p>
    	<p class="live">点击任意 p 元素可以增加尺寸和字间距。包括该段落。</p>
    	<button id="btn4">移除通过 live() 方法为 p 元素添加的 changeSize() 事件处理器</button>
    </div>
	<br>

	<img src="errorimg.gif" />
    <p>如果上面的图像没有正确地加载，会被替换为一段 "图片未加载" 的文本。</p>

    <a href="http://w3school.com.cn/">W3School</a>	
    <p>preventDefault() 方法将防止上面的链接打开 URL。</p>
    <p>请点击该链接，检查是否阻止了默认动作。</p>

    <p>鼠标指针位于： <span id="page"></span></p>

    <p id="result">这是一个段落。</p>
    <button id="btn5">请点击这里</button>
    <br>

    <h1 class="target">这是一个标题</h1>
    <h2 class="target">这是另一个标题</h2>
    <p class="target">这是一个段落</p>
    <button class="target">这是一个按钮</button>
    <p class="target">标题、段落和按钮元素定义了一个点击事件。如果您触发了事件，下面的 div 会显示出哪个元素触发了该事件。</p>
    <div id="div3"></div>
    <br>

    <p>对下面这个按钮的点击事件发生在 1970 年 1 月 1 日之后 <span id="stamp">unknown</span> 毫秒。</p>
    <button id="btn6">Click me</button>
    <br>

    <p id="type">该段落定义了 click、double-click、mouseover 以及 mouseout 事件。如果您触发了其中的一个事件，下面的 div 中会显示出事件的类型。</p>
    <div id="div4"></div>

    <p>请随意键入一些字符：
    	<input type="text" name="" id="which">
    </p>
    <p>当您在上面的框中键入文本时，下面的 div 会显示键位序号。</p>
    <div id="div5"></div>

    <p>窗口大小被调整过 <span id="resize">0</span> 次。</p>
    <p>请试着重新调整浏览器窗口的大小。</p>

    <

</body>
</html>